<template>
	<view class="page">
		<view class="toper">
			<image :src="userInfo.user_pic" mode="" v-if="userInfo.user_pic"/>
			<image src="/static/images/logo.png"  mode="" v-else/>
			<view class="text" v-if="userInfo.phoneNum&&userInfo">{{userInfo.phoneNum}}</view>
			<view class="text" @click="login" v-else>
				点击登录
			</view>
			<view class="iconfont icon-shezhi" @click="toMyset">
				
			</view>
			<!-- <view class="text" v-if="!userInfo.phoneNum">{{userInfo.phoneNum}}
			<view class="text" @click="login" v-else>
				点击登录
			</view>
			<view class="iconfont icon-shezhi" @click="toMyset">
				
			</view> -->
		</view>
		<view class="top">
			<view class="iconfont icon-quanbushenqingdingdan" @click="apply">
				申请接单
			</view>
		</view>
		<view class="between">
			<view class="box1">
				<span>问题请点击微信客服复制微信添加好友</span>
			</view>
			<view class="box2">
				<view class="iconfont icon-weixinkefu">
					微信客服
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="box3">
				<view class="iconfont icon-guanyuwomen" @click="aboutAs">
					关于我们
				</view>
			</view>
			<view class="box4">
				<view class="iconfont icon-tousujianyi" @click="proposal">
					投诉建议
				</view>
			</view>
		</view>
		<view class="bottomer" @click="loginout" v-if="userInfo.phoneNum">
			退出登录
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:null
			}
		},
		created(){
		//获取存储在storage中的userInfo数据name token userInfo	
		this.userInfo=uni.getStorageSync("userInfo")
		},
		methods: {
			login(){
				uni.navigateTo({
					url:"/pages/login/login"
				})
			},
			toMyset(){
				uni.navigateTo({
					url:"/pages/mySet/mySet"
				})
			},
			apply(){
				uni.navigateTo({
					url:"/pages/apply/apply"
				})
			},
			aboutAs(){
				uni.navigateTo({
					url:"/pages/aboutAs/aboutAs"
				})
			},
			proposal(){
				uni.navigateTo({
					url:"/pages/proposal/proposal"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.page{
	background-color: #f2f2f2;
	width: 100%;
	height: 100vh;
	.toper{
		height: 65px;
		width: 100%;
		background-color: #b2cfed;
		display: flex;
		image{
			height: 40px;
			width: 40px;
			
			margin-left: 15px;
		}
		.text{
			margin-left: 10px;
			line-height: 40px;
		}
	}
	.top{
		width: 90%;
		height: 35px;
		background-color: white;
		margin: 0 auto;
		border-radius: 5px;
		margin-top: 12px;
		line-height: 35px;
	}
	.between{
		margin: 12PX 0;
		.box1{
			width: 90%;
			height: 35px;
			background-color: #aed1ee;
			margin: 0 auto;
			border-radius: 5px;
			line-height: 35px;
			text-align: center;
			span{
				font-size: 15px;
			}
		}
		.box2{
			width: 90%;
			height: 35px;
			background-color: white;
			margin: 0 auto;
			border-radius: 5px;
			line-height: 35px;
		}
	}
	.bottom{
		margin: 12PX 0;
		.box3{
			width: 90%;
			height: 35px;
			background-color: white;
			border-bottom: 1px solid #f2f2f2;
			margin: 0 auto;
			border-radius: 5px;
			line-height: 35px;
		}
		.box4{
			width: 90%;
			height: 35px;
			background-color: white;
			margin: 0 auto;
			border-radius: 5px;
			line-height: 35px;
		}
	}
	.bottomer{
		background-color: red;
		width: 80%;
		height: 30px;
		line-height: 30px;
		text-align: center;
		border-radius: 50px;
		margin: 0 auto;
		margin-top: 150px;
		color: white;
	}
}
	
</style>
